<template>
    <div>
        <div class="ui-title">
            <div class="ui-title-back" onclick="window.hideWebview()"></div>
            <div class="ui-title-text">{{title}}</div>
            <div class="ui-title-btn-block">
                <span class="ui-title-btn icon " onclick="location.reload();">&#xe62a;</span>
            </div>
        </div>
        <div class="body">
            <div class="ui-classify">
                <a href="javascript:" class="ui-classify-a" :class="classifyid==1?'on':''" @click="init(1)">基础文章</a>
                <a href="javascript:" class="ui-classify-a" :class="classifyid==2?'on':''"@click="init(2)">梅花入门</a>
            </div>
            <div style="margin:10vw 0;text-align: center;color:#999;" v-if="list.length<1">暂无文章</div>
            <div class="ui-textlist" @click="gotoPage({url:v.content,title:v.title})" v-for="v in list" v-if="v.isshow">
                <div class="ui-textlist-title">{{v.title}}</div>
                <div class="ui-textlist-title2">{{v.title2.substr(0,40)+"..."}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                list:[],
                title:'',
                classifyid:1
            }
        },
        methods: {
            gotoPage:function (data) {
                var options={};
                options.page='articleContent';
                options.hash=data;
                window.openWebview(options);
            },
            init:function (id) {
                if(id)this.classifyid=id;
                var list=JSON.parse(plus.storage.getItem('articleList')).list,tmp=[];
                this.title=this.classifyid==1?'基础文章':'梅花入门';
                for(var i=0;i<list.length;i++){
                    if(list[i].classifyid==this.classifyid){
                        tmp.push(list[i]);
                    }
                }
                this.list=tmp;
            }
        },
        mounted: function () {
            this.init();
        }
    }
</script>

